<template>
  <div>
    <el-button @click="creadBtn">创建时间轴</el-button>
    <draggable
      v-model="rows"
      class="row sortable-list"
      animation="300"
      @end="end"
    >
      <!--  v-show="row.items.length !==0" -->
      <div
        v-for="(row,index) in rows"
        :key="row.index"
        class="sortable"
        @click.stop="clickChoose(row) "
      >
        <span>{{ index+1 }}</span>
        <draggable
          :list="row.items"
          :group="{ name: 'row' }"
          class="row-item"
          :move="onMove"
          @start="start"
          @end="end"
          @choose="choose()"
          @add="add"
          @update="update"
          @unchoose="unchoose"
          @change="change"
          @input="input"
        >
          <div
            v-for="item in row.items"
            :key="item.id"
            class="row-v"
            @click.stop="clickChoose(item)"
          >
            <div>{{ item.title }}</div>
          </div>
        </draggable>
      </div>
    </draggable>
  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  name: 'TwoLists',
  display: 'Two Lists',
  order: 1,
  components: {
    draggable
  },
  data() {
    return {
      enabled: true,
      disabled: false,
      rows: [
        {
          index: 1,
          items: [
            {
              id: '001',
              title: 'item 1'
            }
          ]
        },
        {
          index: 2,
          items: [
            {
              id: '002',
              title: 'item 2'
            },
            {
              id: '003',
              title: 'item 3'
            }
          ]
        },
        {
          index: 3,
          items: [
            {
              id: '004',
              title: 'item 4'
            }
          ]
        }
      ]
    }
  },
  methods: {
    creadBtn() {
      // 找到数组中的最大index值
      const maxIndex = Math.max(...this.rows.map(row => row.index))
      // 创建新的行对象，增加一个新增的index
      const newRow = {
        index: maxIndex + 1,
        items: []
      }
      // 将新行对象添加到数组中
      this.rows.push(newRow)
    },
    start(e) {
      console.log(e, 'start')
    },
    end() {
      this.rows = this.rows.filter(row => row.items.length > 0)
      console.log(this.rows)
    },
    onMove(e, originalEvent) {
      console.log(e)
      console.log(originalEvent)
      // false表示阻止拖拽
      return true
    },
    choose() {
      // console.log(e, '鼠标点击选中要拖拽元素时的事件')
    },
    clickChoose(e) {
      console.log(e, '鼠标点击选中要拖拽元素')
    },
    add(e) {
      console.log(e, 'add')
    },
    update(e) {
      console.log(e, 'update')
    },
    unchoose(e) {
      console.log(e, 'unchoose')
    },
    sort(e) {
      console.log(e, 'sort')
    },
    // 被拖动的元素数据及被拖入后的下标
    change(e) {
      console.log(e, 'change')
      // this.dragNode = {
      //   data: event.added.element,
      //   newIndex: event.added.newIndex
      // }
    },
    // 拖入之后 draggable组件中的数据
    input(e) {
      console.log(e, 'input')
    }

    // add: function() {
    //   this.list.push({ name: 'Juan' })
    // },
    // replace: function() {
    //   this.list = [{ name: 'Edgard' }]
    // },

  }
}
</script>
<style scoped lang="scss">
.sortable-list{
  height: 100%;
  background: grey;padding: 10px;
}
.row-item{
  display: flex;
  -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-flex: 1
}
.sortable{
  background: red;margin-bottom: 10px; padding: 10px;
}

.row-v {
  height: 50px;
  width: 200px;
  background: rgba(0, 191, 255, 0.742);margin: 10px;

}

</style>
